<script setup lang="ts">
import {ref} from "vue";
import router from "@/router";
import {useRoute} from "vue-router";

const route=useRoute(); //获取路由信息
const type=ref(null);
const getValue=()=>{
  if (route.query.params){
    type.value=JSON.parse(route.query.params).type;
    // console.log(type.value)
    // console.log("登录页面接收："+type.value)
  }else{
    console.log("登录页面，没有接收到params")
  }
}
getValue()

const data=ref({
  username: '',
  password: '',
  type:type.value,
})

const res=ref(true); //登录状态：默认成功
const loginSuccess=(r)=>{
  if (r){
    router.push({
      path:'/systemIndex',
      query:{
        params:JSON.stringify({
          data:data.value
          // type:type.value
        })
      }
    })
    console.log(data.value)
    alert('登录成功！进入系统！')
  }else {
    alert('账号或密码错误！登录失败！')
  }
}
</script>

<template>
  <main>
  </main>
  <div class="contents">
    <div class="content">
      <div class="left">
        <h2>鲜花交易中心</h2>
        <h2>全球最大鲜花交易中心</h2>
        <h2>欢迎您登录</h2>
        <RouterLink to="/">首页</RouterLink>
      </div>
      <form class="right" action="" method="post">
        <div class="right-content">
          <label>用户名：<input type="text" placeholder="请输入用户名..." v-model="data.username"></label>
          <label>密码：<input type="password" placeholder="请输入密码..." v-model="data.password"></label>
          <div class="error">
            <RouterLink to="/forgotPassword">忘记密码</RouterLink>
            <RouterLink to="/register">还没注册</RouterLink>
          </div>
          <input type="button" @click="loginSuccess(res)" value="登录">
        </div>
        
      </form>
    </div>
  </div>
</template>
<style scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
main {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/images/index4.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  filter:blur(10px); /*背景毛玻璃效果*/
}
  .contents{
    position:absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .content{
      width: 50%;
      height: 50%;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 15px;
      display: flex;
      .left{
        width: 50%;
        height: 100%;
        background-image: url("../assets/images/index4.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 15px 0 0 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: black;
        font-weight: 200;
        h2:nth-child(1){
          font-size: 50px;
          font-weight: 200;
        }
        h2:nth-child(2){
          font-size: 20px;
          font-weight: 200;
        }
        h2:nth-child(3){
          font-size: 20px;
          font-weight: 200;
        }
        a{
          text-decoration: none;
          /*color: white;*/
          color: black;
          margin-top: 20px;
          padding: 5px 10px;
          border-radius: 5px;
          font-size: 18px;
          font-weight: 200;
          /*background-color: rgba(225,225,225,0.5);*/
          background-color: white;
          cursor: pointer;
        }
        /*a:hover{
          color: black;
          background-color: white;
        }*/
      }
      .right{
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .right-content{
          width: 80%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap:20px;
          label{
            width: 100%;
            input{
              margin-top: 5px;
              width: 100%;
              outline: none;
              padding: 10px;
            }
          }
          >input{
            width: 100%;
            padding: 10px 20px;
            cursor: pointer;
          }
          .error{
            font-size: 12px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }

</style>